<div>
  <div class="head">
    <h2 class="d-inline-block">Encrypt and decrypt properties</h2>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      <ul ngbNav #nav="ngbNav" class="nav-pills">
        <li ngbNavItem="encrypt">
          <a ngbNavLink>Encrypt</a>
          <ng-template ngbNavContent>
            <form>
              <textarea
                type="text"
                class="form-control my-1"
                id="textToEncrypt"
                required
                [(ngModel)]="textToEncrypt"
                name="encryptText"
                #name="ngModel"
              ></textarea>
              <button type="submit" class="btn btn-success" [disabled]="textToEncrypt === ''" (click)="encrypt()">Encrypt</button>
            </form>
          </ng-template>
        </li>
        <li ngbNavItem="decrypt">
          <a ngbNavLink>Decrypt</a>
          <ng-template ngbNavContent>
            <form>
              <textarea
                type="text"
                class="form-control my-1"
                id="encryptedText"
                required
                [(ngModel)]="encryptedText"
                name="decryptText"
                #name="ngModel"
              ></textarea>
              <button type="submit" class="btn btn-success" [disabled]="encryptedText === ''" (click)="decrypt()">Decrypt</button>
            </form>
          </ng-template>
        </li>
      </ul>
      <div [ngbNavOutlet]="nav" class="mt-2"></div>

      <div *ngIf="result">
        <h3>Result:</h3>
        <pre class="code-block">{{ result }}</pre>
      </div>
      <jhi-alert-error></jhi-alert-error>
    </div>

    <div class="text-center pad">
      <a (click)="showMore = !showMore" class="btn btn-default">
        <span *ngIf="showMore"> <fa-icon icon="arrow-circle-down"></fa-icon>&nbsp;show more </span>
        <span *ngIf="!showMore"> <fa-icon icon="arrow-circle-up"></fa-icon> show less </span>
      </a>
    </div>
    <div [ngbCollapse]="showMore">
      <h3>
        <fa-icon icon="info-circle"></fa-icon>
        Using Encryption
      </h3>
      <p>In order to not leave your secrets in plain text at rest, encrypt them using this UI. Then store the encrypted value like this:</p>
      <pre class="code-block">
sample:
    property: '{{ '{' }}cipher{{ '}' }}FKSAJDFGYOS8F7GLHAKERGFHLSAJ'
                </pre
      >
      <p class="alert alert-danger">
        <strong>Warning</strong>: Before being able to encrypt/decrypt your properties values, you will need to configure a strong
        encryption key in the <code>encrypt.key</code> property. <br />When using the JHipster Registry docker image, you can set this with
        the <code>ENCRYPT_KEY</code>
        environment variable. Note that this property only needs to be set for the JHipster Registry as your applications will retrieve the
        decrypted values directly from the config server.
      </p>
    </div>
  </div>
</div>
